<template>
  <div class="container">
    <div class="header flex-yc flex-xbt">
      <h2>课题组主页管理</h2>
      <div class="flex-yc">
        <el-input
          class="input el-icon--left"
          placeholder="搜索"
          v-model="searchKeyword"
          :suffix-icon="Search"
          @input="onInputChange"
        ></el-input>
        <el-button type="primary" @click="onAddTopic">创建课题组主页</el-button>
      </div>
    </div>

    <div style="margin-top: 20px">
      <table-comp :column="column" :list="list">
        <template v-slot:handler>
          <el-button type="primary" link>访问</el-button>
          <el-button
            type="primary"
            link
            @click="$router.push('/topic/edit/index')"
          >
            编辑
          </el-button>
          <el-button type="danger" link>删除</el-button>
        </template>
      </table-comp>
    </div>

    <dialog-comp title="添加课题组主页" v-model="addTopic">
      <AddTopic></AddTopic>
    </dialog-comp>
  </div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import TableComp from '@/components/table/index.vue'
import DialogComp from '@/components/dialog/index.vue'
import AddTopic from './add.vue'
import { onMounted, reactive, ref } from 'vue'
import { tableColumn } from '@/components/table/column'
import { reqGetSubjectGroupPage } from '@/pages/member/api/topic.ts'
import { reqGetTopicGroupPageParams } from '@/pages/member/api/types/topic'

const searchKeyword = ref<string>('')
const onInputChange = (val: string) => {
  searchKeyword.value = val
}

const list = ref([
  {
    a: '1',
    b: '1',
    c: '1',
    d: '1',
    e: '1',
    f: '1',
    g: '1',
  },
])

onMounted(() => {
  getSubjectGroupPage()
})

const reqParams = reactive<reqGetTopicGroupPageParams>({
  pageNo: 1,
  pageSize: 10,
  homePageName: '',
})
// 获取课题组分页列表
const getSubjectGroupPage = async () => {
  await reqGetSubjectGroupPage(reqParams)
}

const column = ref<tableColumn[]>([
  { label: '课题组主页ID', prop: 'a' },
  { label: '课题组主页名称', prop: 'b', width: 130 },
  { label: '课题组主页链接', prop: 'c', width: 150 },
  { label: '管理账户', prop: 'd' },
  {
    label: '添加推广',
    prop: 'e',
    type: 'switch',
    callback: (val) => onAddSpread(val),
  },
  {
    label: '状态',
    prop: 'f',
    type: 'comp',
    is: 'el-button',
    style: {
      type: 'primary',
      link: true,
    },
  },
  {
    label: '主页设计',
    prop: 'f',
    type: 'comp',
    is: 'el-button',
    style: {
      type: 'primary',
      size: 'small',
    },
  },
  {
    label: '操作',
    prop: 'slot',
    type: 'slot',
    slotName: 'handler',
    width: 200,
  },
])

const onAddSpread = (val: boolean) => {
  return new Promise((resolve, reject) => {
    reject()
  })
}

const addTopic = ref<boolean>(false)
const onAddTopic = () => {
  addTopic.value = true
}
</script>

<style scoped lang="scss">
.container {
  background-color: #fff;
  padding: 16px;

  .header {
    font-size: 20px;
    color: #021429;
    font-weight: bold;
  }
}
</style>
